<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>搜索表格</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div class="layui-input-inline">
    <input class="layui-input" name="search" id="demoReload" placeholder="请输入关键字" autocomplete="off">
    <button class="layui-btn" id="sousuo" data-type="reload">搜索</button>
</div>

<table id="demo" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getInsert" id="fasongxungeng">发送巡更路线</button>
        <button class="layui-btn layui-btn-sm" lay-event="getInsert">查看巡更人员对应点位</button>

        <button class="layui-btn layui-btn-sm" lay-event="getRefresh">刷新</button>
    </div>
</script>
<script type="text/html" id='barDemo'>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<style>
    .layui-input{
        margin-top: 10px;
        float: left;
    }
    #sousuo
    {
        margin-left: 10px;
        margin-top: 10px;
        position: absolute;
    }
</style>
<script>


    //一般直接写在一个js文件中
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 550
            ,url: '/api/user/query' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'loginName', title: '登录名', width:120}
                ,{field: 'allName', title: '全称', width: 200}
                ,{field: 'role', title: '角色', width: 200}
                ,{field: 'state', title: '状态', width: 200}
                ,{field: 'operation', title: '操作', width: 200}
                ,{field:'操作',toolbar:"#barDemo"}
            ]],
            id: 'demo',
            toolbar: '#toolbarDemo',//开启自定义工具行，指向自定义工具栏模板选择器
            defaultToolbar: ['filter', 'print', 'exports']
        });

        table.on('toolbar(test)', function (obj) {

            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getInsert':
                    layer.open({
                        type: 2,
                        area:['80%','90%'],
                        content: "fasongxungengluxian.html" ,//不想让iframe出现滚动可以content: ['http://sentsin.com', 'no']
                        title: ['用户添加', 'font-size:18px;'],
                        shade:['0.2','red']
                    });
                    break;

                case 'getRefresh':
                    layer.msg("这是刷新", { icon: 6, anim: 6 });
                    //location.reload();
                    break;
            }
        });

        table.on('tool(test)',function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('确认删除此行？', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('demo', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            search: demoReload.val()
                        }
                    }
                });
            }
        };

        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    });


</script>
</body>
</html>
